<template>
  <div class="title">
    <span>欢迎回来</span>
    <i>请先登录</i>
  </div>
  <el-form
    ref="ruleForm"
    class="login-form"
    :model="obj.loginForm"
    :rules="rules"
    label-position="top"
  >
    <el-form-item prop="username" label="用户名">
      <el-input
        v-model="obj.loginForm.username"
        autocomplete="off"
        placeholder="请输入账户"
        @keyup.enter.native="submitForm"
      >
      </el-input>
    </el-form-item>
    <el-form-item prop="password" label="密码">
      <el-input
        type="password"
        v-model="obj.loginForm.password"
        placeholder="请输入密码"
        :show-password="true"
        @keyup.enter.native="submitForm"
      >
      </el-input>
    </el-form-item>
    <el-form-item>
      <el-button @click="submitForm">登 录</el-button>
    </el-form-item>
  </el-form>
  <div class="footer-btn">
    <span @click="onSignUp(2)">忘记密码</span>
    <span @click="onSignUp(1)">新用户？</span>
  </div>
</template>
<script lang="ts" setup>
import { checkPhoneAndAccount } from '@/api/api'
import store from '@/store'
import { reactive, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useStore } from 'vuex'

interface stateType {
  loginForm: {
    username: string
    password: string
  }
}
type VoidNoop = (arg?: Error) => void
const commit = useStore()
const ruleForm = ref<any>(null)
const obj = reactive<stateType>({
  loginForm: {
    username: 'dhy123',
    password: 'qwe123'
  }
})
const vaildateUserName = (rule: any, value: string, callback: VoidNoop) => {
  if (value === '') {
    callback(new Error('请输入账号'))
  } else {
    checkPhoneAndAccount({ account: obj.loginForm.username, code: 0 })
      .then(res => {
        console.log(res, res.data.registerStatus)
        if (!res.data.registerStatus) {
          callback(new Error('当前账号不存在，请重新输入'))
        } else {
          callback()
        }
      })
      .catch(err => {
        console.log(err)
      })
  }
}
const vaildatePassword = (rule: any, value: string, callback: VoidNoop) => {
  if (value === '') {
    callback(new Error('请输入密码'))
  } else {
    callback()
  }
}
const rules = {
  username: [{ validator: vaildateUserName, trigger: 'blur' }],
  password: [{ validator: vaildatePassword, trigger: 'blur' }]
}

const onSignUp = (type: number) => {
  store.dispatch('app/toggleLoginFormType', type)
}

const router = useRouter()
const route = useRoute()

const submitForm = (e: any) => {
  e.preventDefault()
  ruleForm.value.validate((valid: boolean) => {
    console.log(valid)
    if (valid) {
      console.log('登录中')
      commit
        .dispatch('user/login', { ...obj.loginForm })
        .then(res => {
          let pathText =
            route.query.redirect !== undefined ? route.query.redirect : '/'
          router.push({ path: pathText as string })
        })
        .catch(err => {
          console.log(err)
        })
    } else {
    }
  })
}
</script>
<style lang="scss" scoped>
.title {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
  span {
    font-size: 26px;
    color: #fff;
  }
  i {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.514);
    font-style: inherit;
    margin-top: 10px;
  }
}
.login-form {
  width: 80%;
  margin: 0 auto;

  ::v-deep(.el-form-item__label) {
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
    font-weight: bold;
    padding: 0;
    line-height: 26px;
  }
  ::v-deep(.el-input__inner) {
    background: none;
    border: 0;
    border-radius: 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.3);
    position: relative;
    color: #fff;
    &:focus {
      border-bottom: 1px solid #fff;
    }
  }

  ::v-deep(.el-button) {
    background: #00897b;
    color: #fff;
    width: 100%;
    border: 0;
    &:hover {
      background: #007f72;
    }
  }
  ::v-deep(.el-form-item__error) {
    padding-left: 15px;
  }
}
.footer-btn {
  display: flex;
  justify-content: space-between;
  width: 80%;
  margin: 0 auto;
  span {
    color: rgba(255, 255, 255, 0.507);
    cursor: pointer;
    &:hover {
      color: #fff;
    }
  }
}
</style>
